<template>
	<view>
		<z-paging
			ref="paging"
			v-model="dataList"
			:loading-more-enabled="false"
			@query="queryList"
			safe-area-inset-bottom
		>
			<view slot="top">
				<u-navbar :title="$t('staff.navText')" :fixed="false" :autoBack="true" />
			</view>
			<view class="content">
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<view class="item_left">
						<u-avatar size="50" :src="item.avatar"></u-avatar>
						<view class="nickname">{{ item.nickname }}</view>
						<view class="mobile">{{ item.mobile }}</view>
					</view>
					<view class="item_right" @click="deleteItem(item, index)">
						{{ $t('staff.deleteText') }}
					</view>
				</view>
			</view>
			<view class="bottom" slot="bottom">
				<u-button
					:text="$t('staff.addText')"
					shape="circle"
					@click="submit"
					:customStyle="btnStyle"
				></u-button>
			</view>
		</z-paging>
		<u-toast ref="uToast"></u-toast>

		<u-popup :show="show" @close="show = false,value=''" mode="center" round="20rpx">
			<view class="pupub">
				<view class="title">添加员工</view>
				<view class="ipt">
					<u--input
						placeholder="请输入员工手机号"
						border="surround"
						v-model.number="value"
					></u--input>
				</view>
				<view class="btns">
					<view @click="(show = false), (value = '')">取消</view>
					<view @click="handerSubmit">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			show: false,
			phone: '',
			value: '',
			dataList: [],
			btnStyle: {
				background: '#FFC100',
				border: 'none',
				height: '80rpx',
				color: '#fff',
				width: '90%',
				margin: '40px auto'
			}
		};
	},
	computed: {
		...mapGetters(['merchant'])
	},
	methods: {
		queryList(pageNo, pageSize) {
			this.$http
				.post('wanlshop/shop/memberList', {
					shop_id: this.merchant.id
				})
				.then(res => {
					if (res.code == 1) {
						this.$refs.paging.complete(res.data);
					} else {
						this.$refs.paging.complete(false);
					}
				});
		},
		// 删除员工
		deleteItem(item, index) {
			uni.showLoading({
				title: '删除中...',
				mask: true
			});
			this.$http
				.post('wanlshop/shop/deleteMem', {
					user_id: item.id
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.dataList.splice(index, 1);
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								message: '删除成功',
								duration: 1000
							});
						}, 150);
					}
				});
		},
		// 添加
		submit() {
			this.show = true;
			// let reg = /^1[3-9]\d{9}$/;
			// uni.showModal({
			// 	title: '添加员工',
			// 	placeholderText: '请输入员工手机号',
			// 	editable: true,
			// 	success: res => {
			// 		if (res.confirm) {
			// 			if (uni.$u.test.mobile(res.content)) {
			// 				this.$http
			// 					.post('wanlshop/shop/addShop', {
			// 						shop_id: this.merchant.id,
			// 						phone: res.content
			// 					})
			// 					.then(info => {
			// 						if (info.code == 1) {
			// 							this.$refs.paging.reload();
			// 						}
			// 					});
			// 			} else {
			// 				uni.$u.toast('手机号格式不正确');
			// 			}
			// 		}
			// 	}
			// });
		},
		handerSubmit() {
			if (!this.value) {
				return uni.showToast({
					title: '请输入员工的手机号',
					icon: 'none'
				});
			}
			let reg = /^1[3-9]\d{9}$/;
			if (!reg.test(this.value)) {
				return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
			}

			this.$http
				.post('wanlshop/shop/addShop', {
					shop_id: this.merchant.id,
					phone: this.value
				})
				.then(info => {
					if (info.code == 1) {
						this.$refs.paging.reload();
						this.show = false;
						this.value = '';
					}
				});
		}
	}
};
</script>
<style>
page {
	background: #f4f4f7;
}
</style>
<style lang="scss" scoped>
.bottom {
	display: flex;
	align-items: center;
	justify-content: center;
}

.content {
	padding: 20rpx;

	.item {
		border-radius: 20rpx;
		background: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: grid;
		grid-template-columns: auto 50px;
	}

	.item_right {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ff8833;
		font-size: 28rpx;
	}

	.item_left {
		display: flex;
		align-items: center;

		.nickname {
			color: #000;
			font-size: 30rpx;
			font-weight: bold;
			margin-left: 20rpx;
		}

		.mobile {
			color: #000;
			font-size: 30rpx;
			font-weight: bold;
			margin: 0rpx 20rpx;
		}
	}

	.item:last-child {
		margin-bottom: 0rpx;
	}
}
.pupub {
	width: 690rpx;
	height: 500rpx;
	.title {
		text-align: center;
		padding-top: 40rpx;
		font-weight: bold;
	}
	.ipt {
		width: 600rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}
	.btns {
		width: 600rpx;
		height: 90rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		display: flex;
		justify-content: space-between;
		& > view:nth-child(1) {
			width: 260rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			background-color: #eee;
			color: #333;
			border-radius: 45rpx;
		}
		& > view:nth-child(2) {
			width: 260rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			background-color: #ffc100;
			color: #fff;
			border-radius: 45rpx;
		}
	}
}
</style>
